<!--
 * @Author: your name
 * @Date: 2021-11-20 00:11:16
 * @LastEditTime: 2021-11-20 00:14:01
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jf-nlitc\src\views\Home\swyzt\swjc\sk\index.vue
-->
<template>
    <!-- 水库 -->
    <div class="bottom">
        <div class="raining">
            <p>实时视频</p>
        </div>
        <div class="shipin">
            <!-- <img src="src/assets/images/home/image 39.png'" alt=""> -->
        </div>
        <div class="level" v-for="(item, index) in bottomList" :key="index">
            <div class="shijian">
                <span>{{item.shijian}}</span>
                <span>{{item.number}}</span>
            </div>
            <div class="shiian">
                <span>{{item.shiian}}</span>
                <span>{{item.numb}}</span>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            bottomList: [
                {
                    shijian: '数据采集时间',
                    number: '2020/12/23',
                    shiian: '数据采集人',
                    numb: '张三',
                },
            ],
        }
    },
    computed: {},
    watch: {},
    methods: {},
    created() {},
    mounted() {},
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
    components: {},
}
</script>

<style lang="scss" scoped>
.bottom {
    width: 100%;
    height: 250px;
    // border: 1px solid red;
    margin-top: 20px;
    .raining {
        width: 100%;
        height: 25px;
        // border: 1px solid red;
        background: url('../../../../../../../src/assets/images/home/top.png') no-repeat center;
        background-size: 99% 100%;
        p {
            margin-left: 15px;
            font-family: OPPOSans;
            font-size: 18px;
        }
    }
    .shipin {
        width: 100%;
        height: 230px;
        // border: 1px solid #fff;
        background: url('../../../../../../../src/assets/images/home/image 39.png') no-repeat center;
        background-size: 99% 100%;
        margin-top: 20px;
    }
    .level {
        width: 79%;
        height: 30px;
        border-style: solid;
        margin-top: 5px;
        display: flex;
        line-height: 30px;
        justify-content: space-between;
        font-size: 12px;
        letter-spacing: 0.6px;
        color: rgba(255, 255, 255, 0.9);
        .shijian {
            width: 50%;
            height: 30px;
            //  border: 1px solid #fff;
            display: flex;
            justify-content: space-between;
            span:nth-child(1) {
                color: #a8bacb;
            }
        }
        .shiian {
            width: 30%;
            height: 30px;
            //  border: 1px solid #fff;
            display: flex;
            justify-content: space-between;
            span:nth-child(1) {
                color: #a8bacb;
            }
        }
    }
}
</style>
